<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/easel.js"></script>
  <script src="../lib/preload.js"></script>
</head>
<body>
  <canvas id="demo" width="800" height="500"></canvas>

  <script>
    // 创建一个舞台
    let stage = new createjs.Stage('demo');
    // 创建一个图形
    let circle = new createjs.Shape();
    // 这个图形为填充类型，画圆
    circle.graphics.beginFill('green').drawCircle(0, 0, 40);
    // 设置位置
    circle.x = circle.y = 50;
    // 把这个图形添加到舞台中
    stage.addChild(circle);
    // 绘制
    stage.update();

    circle.addEventListener('click', ev => {
      console.log(1)
    })

    // 创建获取资源队列，需要引入preload
    let queue = new createjs.LoadQueue(false, '../assets/');    

    queue.loadManifest([
      {src: 'test/player_1.png', id: 'player_1'}
    ]);

    // 资源加载完毕
    queue.on('complete', () => {
      var player_1 = queue.getResult('player_id');
      console.log('资源加载完毕')
    })

    circle.name = 'test_circle';

    let testCircle = stage.getChildByName('test_circle');

    // 显示/隐藏
    testCircle.visible = true;

    // createjs.Ticker.framerate = 60;
    // 将其设置为requestAnimationFrame模式
    createjs.Ticker.timingMode = createjs.Ticker.RAF;

    createjs.Ticker.addEventListener('tick', () => {
      circle.x += 5;
      if(circle.x > stage.canvas.width) circle.x = 0;
      stage.update();
    })
  </script>
</body>
</html>